<template>
	<view class="page_content">
		<view class="header" v-if="hasLogin">
			<view class="left" @tap="navTo('/pages/user/meInfo')">
				<image class="leftimage" src="../../static/user/avatar.png" mode="scaleToFill"></image>
				<text class="lefttext" style="font-size: 40rpx;color:#433302 ;font-weight: 500;">{{userInfo.nickName}}</text>
			</view>
			<!-- <image class="btn" src="../../static/user/mail.png"></image> -->
		</view>
		<!-- <image class="logo" src="/static/head.png"></image> -->
		
		<view class="welfare" style="flex-direction: column;margin-top: 40upx;">
			<view class="segHeader">
				<view style="display: flex;align-items: flex-end;">
					<text class="infoTitle">IPFS</text>
					<text class="infoSubtitle">矿机分布系统</text>
				</view>
				<image class="infoEye" src="../../static/user/secrete.png" mode="scaleToFill"></image>
			</view>
			
			<view class="segHeader">
				<text class="itemTitle">账户总资产金额(BTC)</text>
				<text class="itemTitle">昨日总产出(估算)</text>
			</view>
			
			<view class="segHeader" style="margin-top: -20upx;">
				<text class="itemTitle">0.00</text>
				<text class="itemTitle">0.00(CNY)</text>
			</view>
			
			<view class="segHeader" style="margin-top: -20upx;padding-bottom: 30upx;">
				<text class="itemTitle" style="color:#656565;">≈0.00</text>
			</view>
		</view>
		
		<view class="welfare" style="justify-content: space-around;">
			<view class="segHeader">
				<text class="segTitle" style="color:#656565;">可用余额</text>
				<text class="segDetail">1000U</text>
			</view>
			
			<template v-for="(info,i) in funs">
				<view @tap="btnChang(i)" :class="btnCurrent == i ? 'yuActItem' : 'yuItem'" :key=i>
					<image class="btnImag" :src="info.icon" mode="scaleToFill"></image>
					<text class="btnTxt">{{info.name}}</text>
				</view>
			</template>
		</view>
		
		
<!-- 		<view class="title_line">
			<text class="title">我的任务</text>
			<text class="more">查看更多</text>
		</view>
	
		<scroll-view class="slider" scroll-x="true">
			<template v-for="(task,i) in tasks">
				<view :key="'task_'+i" class="s_item">
					<view class="content">
						<image :src="task.icon" class="img"></image>
						<text class="name">{{task.name}}</text>
						<text class="desc">{{task.desc}}</text>
						<text class="btn">去完成</text>
					</view>
				</view>
			</template>
		</scroll-view> -->
	
<!-- 		<view class="title_line">
			<text class="title">会员福利</text>
			<text class="more">查看更多</text>
		</view> -->
	
		<view class="welfare">
			<template v-for="(info,i) in welfare">
				<view class="item" :key=i @tap=mineBtn(i)>
					<view class="border">
						<image class="img" :src="info.icon"></image>
					</view>
					<text class="txt">{{info.name}}</text>
				</view>
			</template>
		</view>
		
		
		<view class="welfare">
			<view class="segHeader">
				<text class="segTitle">其他服务</text>
			</view>
			
			<template v-for="(info,i) in services">
				<view class="item" :key=i @tap=navTo(info.page)>
					<view class="border">
						<image class="img" :src="info.icon" style="width: 40upx;height: 40upx;"></image>
					</view>
					<text class="txt">{{info.name}}</text>
				</view>
			</template>
		</view>
		
	</view>
</template>

<script>
	import {
	    mapState 
	} from 'vuex'; 
	 import {
	 	mapMutations
	 } from 'vuex';
	export default {
		data() {
			return {
				title: 'Hello',
				useAccount:{},
				bigIdx: 1,
				btnCurrent:2,
				vips: [{
					bg: 'linear-gradient(94deg,rgba(150,147,168,1),rgba(150,147,164,1))',
					shadow: '0px 3px 12px 0px rgba(195,164,110,0.23)',
					title: 'VIP会员',
					subTitle: '距离下一等级还差888积分'
				}, {
					bg: 'linear-gradient(94deg,rgba(192,160,105,1),rgba(233,213,172,1))',
					shadow: '0px 3px 12px 0px rgba(195,164,110,0.23)',
					title: 'VIP会员',
					subTitle: '距离下一等级还差888积分'
				}, {
					bg: 'linear-gradient(94deg,rgba(150,147,168,1),rgba(150,147,164,1))',
					shadow: '0px 3px 12px 0px rgba(195,164,110,0.23)',
					title: 'VIP会员',
					subTitle: '距离下一等级还差888积分'
				}],
				funs: [
					{
						icon: '/static/user/tixian.png',
						name: '提现',
					},
					{
						icon: '/static/user/zhuangzhang.png',
						name: '转账',
					},
					{
						icon: '/static/user/chongzhi.png',
						name: '充值',
					}
				],
				welfare: [{
						icon: '/static/user/kuangji.png',
						name: '我的矿机'
					},
					{
						icon: '/static/user/cunbi.png',
						name: '我的存币'
					},
					{
						icon: '/static/user/jiangjin.png',
						name: '我的奖金'
					},
					{
						icon: '/static/user/tuandui.png',
						name: '我的团队'
					}
				],
				services: 
				[
					{
						icon: '/static/user/guanyu.png',
						name: '关于我们',
						page:'',
					},
					{
						icon: '/static/user/zhuanrang.png',
						name: '算力转让',
						page:''
					},
					{
						icon: '/static/user/zhanghao.png',
						name: '收款账号',
						page:'account'
					},
					{
						icon: '/static/user/cankao.png',
						name: '参考行情',
						page:''
					},
					{
						icon: '/static/user/dingdan.png',
						name: '我的订单',
						page:''
					},
					{
						icon: '/static/user/kefu.png',
						name: '专属客服',
						page:''
					},
					{
						icon: '/static/user/shezhi.png',
						name: '系统设置',
						page: '/pages/setting/setting'
					}
				]
	
			}
		},
		onLoad() {
			var me = this;
			
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onShow(){
			
			this.checkToken();
		},
		methods: {
			checkToken(){
				var that=this;
				 uni.getStorage({
				    key: 'token',
				    success: function (res) {
						that.token=res.data;
						that.getUserAccount(res.data);
				    },
					fail:function(error){
						uni.navigateTo({
							url: `/pages/login/login`
						})
					}});
			},
			
			getUserAccount(token){
				console.log(token);
	 			var that=this;
	 			uni.request({
	 					url: that.serverUrl + '/core/api/v1/hy/wallet/total',
	 					method: "GET",
	 					header: {
	 						'content-type': 'application/json',
	 						'Authorization': 'Bearer '+token
	 					},
	 					success: (res) => {
	 						if (res.data.code == 200) {
								that.useAccount=res.data.data;
								console.log(that.useAccount);
	 						}
	 					},
	 					fail: (error) => {
	 						console.log(error);
	 					}
	 				})
	 		},
			
			swiperChange(e) {
				this.bigIdx = e.detail.current
			},
			navTo(url){
				var me = this;
				if(!me.hasLogin){
					uni.navigateTo({
						url: `/pages/login/login`
					})
					return;
				}
				uni.navigateTo({  
					url:url,
					fail: (e) => {
						console.log(e)
					}
				})  
			},
			btnChang(i) {
				var me = this;
				// me.btnCurrent = i;
				if (i == 0) {
					me.navTo('/pages/user/tixian')
				}
				if (i == 1) {
					me.navTo('/pages/user/zhuanzhang')
				}
			},
			mineBtn(i) {
				var me = this
				if (i == 0) {
					me.navTo('/pages/user/ipfsList')
				}
				if (i == 3) {
					// me.navTo('/pages/user/team')
					uni.navigateTo({
						url:'team'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@function realSize($args) {
		@return $args / 1.5;
	}

	.page_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header {
		// padding-top: var(--status-bar-height);
		width: 100%;
		height: 128upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		// margin-bottom: 50upx;
		background-color: #12B3F9;
		.left {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-left: 4%;
			
			.leftimage {
				width: 65upx;
				height: 65upx;
				border:5upx solid #fff;
				border-radius: 50%;
			}
			
			.lefttext {
				font-size: $uni-font-size-base;
				margin-left: 20upx;
			}
		}
		.btn {
			width: 54upx;
			height: 54upx;
			margin-right: 4%;
		}

		.title {
			font-size: 36upx;
			font-weight: 500;
			color: rgba(43, 43, 43, 1);
			line-height: 82upx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.logo {
		margin-top: 20upx;
		width: 200upx;
		height: 200upx;
	}

	

	.title_line {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.title {
			margin-left: 20px;
			font-size: 18px;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			line-height: 41px;
		}

		.more {
			margin-right: 20px;
			font-size: 10px;
			font-weight: 300;
			color: rgba(153, 153, 153, 1);
			line-height: 41px;
		}
	}

	

	.welfare {
		width: 92%;
		margin-left: 4%;
		margin-right: 4%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 21px 0px rgba(103, 103, 103, 0.2);
		border-radius: 20upx;
		margin-bottom: 20upx;
		flex-wrap: wrap;
		// margin-top: 100upx;
		
		.segHeader {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 92%;
			padding: 30upx 30upx 0upx 30upx;
			
			.segTitle {
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
			}
			
			.segDetail {
				font-size: $uni-font-size-lg;
				color: $uni-text-color;
			}
			
			.infoTitle {
				font-weight: 800;
				font-size: 32upx;
				color:#433302;
				text-align: center;
			}
			
			.infoSubtitle {
				font-size: 22upx;
				color:#656565;
				text-align: center;
				margin-left: 10upx;
			}
			
			.infoEye {
				width: 40upx;
				height: 40upx;
			}
			
			.itemTitle {
				font-size: $uni-font-size-base;
				color:#433302;
				text-align: center;
			}
			
		}
		
		.yuItem {
			display: flex;
			flex-direction: row;
			padding: 20upx 30upx;
			border: 1px solid #ddd;
			border-radius: 10upx;
			margin: 40upx 0;
			
			.btnImag {
				width: 40upx;
				height: 40upx;
			}
			
			.btnTxt {
				margin-left: 30upx;
				font-weight: 400;
				color:#433302;
				font-size: $uni-font-size-base;
			}
		}
		
		.yuActItem {
			display: flex;
			flex-direction: row;
			padding: 20upx 30upx;
			border: 1px solid #ddd;
			border-radius: 10upx;
			margin: 40upx 0;
			background-color: #FFDB0b;
			
			.btnImag {
				width: 40upx;
				height: 40upx;
			}
			
			.btnTxt {
				margin-left: 30upx;
				font-weight: 400;
				color:#433302;
				font-size: $uni-font-size-base;
			}
		}
		
		.item {
			padding: 30upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.btnItem {
				color: white;
			}

			.border {
				margin-top: 10upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.img {
					// border: 4upx solid #c9ac7a;
					// border-radius: 50%;
					width: 88upx;
					height: 88upx;
				}
			}

			.txt {
				margin-top: 10upx;
				font-size: $uni-font-size-base;
				font-weight: 300;
				color: rgba(153, 153, 153, 1);
			}
		}
	}
	
</style>
